{extend name="../../admin/view/main"}

{block name="content"}
<style>
    [data-upload-image] + .uploadimage {
        width: 100px;
        height: 100px;
        margin: 0 !important;
    }
    .hide{
        display:none!important;
    }
</style>

<div class="think-box-shadow">
    <form id="DataForm" class='layui-form' autocomplete='off' action="{:sysuri()}?type={$get.type|default=''}" onsubmit="return false" style="width:850px">
        <div class="text-center padding-top-10">
            <b class="color-text font-s16">{$title|default='图片内容管理'}</b>
            <div class="color-red font-s12">图片尺寸：1500px * 700px</div>
        </div>
        <div class="hr-line-dashed margin-bottom-25"></div>
        <div class="layui-form-item" data-item-box>
            <div class="layui-form-item text-center">
                <a class="layui-btn layui-btn-warm" data-item-add>添加选项</a>
            <button class="layui-btn" data-submit>保存数据</button>
            </div>
        </div>
    </form>
</div>

<div data-item-tpl class="layui-hide">
    <div class="layui-form-item" style="padding-left:80px" data-news-item>
        <div class="layui-input-inline text-center swiper_img">
            <input data-upload-image name="img[]" type="hidden">
            <input name="id[]" type="hidden">
        </div>
        <div class="nowrap margin-bottom-5">
            <label class="inline-block relative text-middle">
                <span class="color-green font-s13 margin-right-5">轮播类型</span>
                <div style="width:280px">
                    <select class="layui-select type" name="type[]" lay-ignore lay-filter="selectContent" >
                        {foreach ['1'=>'品牌','2'=>'文章','3'=>'商品'] as $key=>$val}
                        <option value="{$key}" >{$val}</option>
                        {/foreach}
                    </select>
                    <span class="help-block">设置后轮播将根据该项设置进行跳转</span>
                </div>
            </label>
            <div class="inline-block margin-left-5">
                <a data-item-up class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-up"></i></a>
                <a data-item-dn class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-down"></i></a>
                <a data-item-rm class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-close"></i></a>
            </div>
        </div>
        <div class="nowrap margin-bottom-5">
            <label class="inline-block relative brand">
                <span class="color-green font-s13 margin-right-5">选择商品品牌</span>
                <div class="inline-block margin-left-5">
                    <select class="layui-select brand_id" name="brand_id[]" lay-ignore required>
                        {foreach $brands as $key=>$brand}
                        <option value="{$brand.id}">{$brand.name}</option>
                        {/foreach}
                    </select>
                </div>
            </label>
            <label class="inline-block relative news hide">
                <span class="color-green font-s13 margin-right-5">选择文章内容</span>
                <div class="inline-block margin-left-5">
                    <select class="layui-select new_id" name="new_id[]" lay-ignore required>
                        {foreach $news as $key=>$new}
                        <option value="{$new.id}" >{$new.name}</option>
                        {/foreach}
                    </select>
                </div>
            </label>
            <label class="inline-block relative goods hide">
                <span class="color-green font-s13 margin-right-5">选择商品内容</span>
                <div class="inline-block margin-left-5">
                    <select class="layui-select good_id" name="good_id[]" lay-ignore required>
                        {foreach $goods as $key=>$g}
                        <option value="{$g.id}" >{$g.name}</option>
                        {/foreach}
                    </select>
                </div>
            </label>
        </div>
    </div>
</div>

<label class="layui-hide">
    <textarea id="DefaultData">{$data|default=[]|json_encode}</textarea>
</label>

<script>
    $(function () {

        /*! 默认数据处理 */
        var defas = JSON.parse($('#DefaultData').val()), idx;
        if (defas.length > 0) for (idx in defas) addItem(defas[idx]); else addItem({});

        /*! 跳转规则选择器 */
        layui.form.on('select(selectContent)', function (data) {
            var _this = $(data.elem).parents(".nowrap").next();
            if($(data.elem).val() == 1){
                _this.find(".brand").removeClass('hide')
                _this.find(".news").addClass('hide')
                _this.find(".goods").addClass('hide')
            }else if($(data.elem).val() == 2){
                _this.find(".news").removeClass('hide')
                _this.find(".brand").addClass('hide')
                _this.find(".goods").addClass('hide')
            }else{
                _this.find(".news").addClass('hide')
                _this.find(".brand").addClass('hide')
                _this.find(".goods").removeClass('hide')
            }
        });

        /*! 表单元素操作 */
        $('form#DataForm').on('click', '[data-item-add]', function () {
            addItem({});
            //TODO 最后一个点击 或者加到顶部
            // $(".layui-form-item").last().find('[data-item-up]').trigger("click");
        }).on('click', '[data-item-rm]', function () {
            $(this).parents('[data-news-item]').remove();
            setAddButton();
        }).on('click', '[data-item-up]', function () {
            var item = $(this).parents('[data-news-item]');
            var prev = item.prev('[data-news-item]');
            if (item.index() > 0) item.insertBefore(prev);
        }).on('click', '[data-item-dn]', function () {
            var item = $(this).parents('[data-news-item]');
            var next = item.next('[data-news-item]');
            if (next) item.insertAfter(next);
        }).vali(function (form, data) {
            data = [];
            for (idx in form.img) {
                if (!form.img[idx]) return $.msg.tips('需要上传图片文件哦！');
                if(form.type[idx] == undefined){
                    continue;
                }
                if(form.type[idx] == 1){
                    if(form.brand_id != undefined) {
                        if (form.brand_id[idx]) data.push({
                            img: form.img[idx],
                            id: form.id[idx],
                            type: form.type[idx],
                            brand_id: form.brand_id[idx]
                        });
                    }
                }else if(form.type[idx] == 2){
                    if(form.new_id != undefined) {
                        if (form.new_id[idx]) data.push({
                            id: form.id[idx],
                            img: form.img[idx],
                            type: form.type[idx],
                            new_id: form.new_id[idx]
                        });
                    }
                }else{
                    if(form.good_id != undefined) {
                        if (form.good_id[idx]) data.push({
                            id: form.id[idx],
                            img: form.img[idx],
                            type: form.type[idx],
                            good_id: form.good_id[idx]
                        });
                    }
                }
            }
            $.form.load(this.action, {data: JSON.stringify(data)}, 'post');
        });

        /*! 添加图片数据项 */
        function addItem(data) {
            // data.url = data.url || '#';
            var $html = $($('[data-item-tpl]').html());
            console.log(data);
            for (idx in data) {

                if(idx == 'type'){

                }else if(idx == 'brand_id'){

                }else if (idx == 'new_id'){

                }else if (idx == 'good_id'){

                }else{
                    $html.find('[name^=' + idx + ']').val(data[idx]);
                }
            }
            $html.find('select').removeAttr('lay-ignore').each(function () {
                var _this = $(this)
                _this.find("option").each(function (i,v) {
                    if(_this.hasClass("type")){
                        if(v.value == data.type){
                            v.selected = true;
                            if(data.type == 1){
                                $(v).parents(".nowrap").next().find(".brand").removeClass("hide")
                                $(v).parents(".nowrap").next().find(".news").addClass("hide")
                                $(v).parents(".nowrap").next().find(".goods").addClass("hide")
                            }else if(data.type == 2){
                                $(v).parents(".nowrap").next().find(".news").removeClass("hide")
                                $(v).parents(".nowrap").next().find(".brand").addClass("hide")
                                $(v).parents(".nowrap").next().find(".goods").addClass("hide")
                            }else{
                                $(v).parents(".nowrap").next().find(".news").addClass("hide")
                                $(v).parents(".nowrap").next().find(".brand").addClass("hide")
                                $(v).parents(".nowrap").next().find(".goods").removeClass("hide")
                            }
                        }
                    }else if(_this.hasClass("brand_id")){
                        if(v.value == data.brand_id){
                            v.selected = true;
                        }
                    }else if(_this.hasClass("new_id")){
                        if(v.value == data.new_id){
                            v.selected = true;
                        }
                    }else if(_this.hasClass("good_id")){
                        if(v.value == data.good_id){
                            v.selected = true;
                        }
                    }
                })
            }), $('[data-item-add]').parent().before($html), setAddButton();
            /*! 初始化插件绑定 */
            $.form.reInit($html).find('input[data-upload-image]').uploadOneImage();
        }

        /*! 检查并操作按钮 */
        function setAddButton() {
            this.limit = parseInt('{$number|default=0}');
            this.laster = $('[data-item-box] [data-item-add]').parent();
            this.number = $('[data-item-box] [data-news-item]').size();
            if (this.number >= this.limit && this.limit > 0) {
                this.laster.addClass('layui-hide');
            } else {
                this.laster.removeClass('layui-hide');
            }
        }
    });
</script>
{/block}
